<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jquery没有新意，但是也有一点点</title>
		<script src="../js/jquery-3.6.3.min.js"></script>
		<script>
			$(function(){
				//each
				//dom =>jq obj :$()函数
				//jq=>dom,get(Index)或者 [index]
				let l=$("div #fruit li");
				let first=l[0];//first是dom元素
				first.innerHTML="红富士苹果";
				//i是下标，o是对象，而且o是dom元素，也可以用this
				l.each(function(i,obj){
					//console.log(i+",,,,"+obj);
					$(obj).css("font-size",(10+i*5)+"px");
					if(i>5)
						return false;//循环终止
				});
				//对新加入的元素无效
				l.bind({
					mouseover:function(){
						$(this).css({"color":"red","font-size":"80px"});
					},
					mouseout:function(){
						$(this).css({"color":"black","font-size":"16px"});
					}
				});
				
				$("#btn").click(function(){
					var newn=window.prompt("请输入新水果的名字：");
					if(!newn)
					  return;
					let ul=$("div ul#fruit");
					//ul.append("<li>"+newn+"</li>");  
					ul.prepend("<li>"+newn+"</li>"); 
				});
			});
		</script>
	</head>
	<body>
		<input type="button" value="添加新品种" id="btn"/>
		<div>
			<ul id="fruit">
				<li>苹果</li>
				<li>桃子</li>
				<li>柿子</li>
				<li>梨子</li>
				<li>李子</li>
				<li>葡萄</li>
				<li>香蕉</li>
				<li>西红柿</li>
				<li>萝卜</li>
			</ul>
		</div>
	</body>
</html>